<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
			<!--mate标签的作用是让当前的viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家想要的效果，如果不这样设定的话，那就会使用那个比屏幕宽的默viewpo认rt-->
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>商场首页</title>

		<!-- 引入Bootstrap核心样式文件 -->
		<link href="../css/bootstrap.min.css" rel="stylesheet">
		<!-- 引入jQuery核心js文件 -->
		<script src="../js/jquery-1.11.3.min.js"></script>
		<!-- 引入BootStrap核心js文件 -->
		<script src="../js/bootstrap.min.js"></script>

		
	</head>

	<body>
		<!--顶栏-->
			<div class="row">
				  <div class="col-lg-4 col-sm-4 col-md-4">
				  	<img src="../img/logo2.png"/>
				  </div>
				  <div class="col-lg-5 col-sm-4 col-md-4 hidden-xs">
				  	<img src="../img/header.png"/>
				  </div>
				  <!-- Optional: clear the XS cols if their content doesn't match in height -->
				  <div class="clearfix visible-xs"></div>
				  <div class="col-lg-3 col-sm-12 col-md-4" style="margin-top: 15px;">
				  	<a href="#">登录</a>
				  	<a href="#">注册</a>
				  	<a href="#">购物车</a>
				  </div>
			</div>
			<!--导航栏-->
			<div class="container" style="margin-top: 10px;">
				<nav class="navbar navbar-inverse">
						<div class="container-fluid">
							<!-- Brand and toggle get grouped for better mobile display -->
							<div class="navbar-header">
								<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
							        <span class="sr-only">Toggle navigation</span>
							        <span class="icon-bar"></span>
							        <span class="icon-bar"></span>
							        <span class="icon-bar"></span>
							    </button>
								<a class="navbar-brand" href="#">首页</a>
							</div>
		
							<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
								<ul class="nav navbar-nav">
									<li class="active">
										<a href="#">手机数码 <span class="sr-only">(current)</span></a>
									</li>
									<li>
										<a href="#">家用电器</a>
									</li>
									<li>
										<a href="#">鞋靴箱包</a>
									</li>
									<li>
										<a href="#">电脑办公</a>
									</li>
									<li>
										<a href="#">孕婴保健</a>
									</li>
									<li class="dropdown">
										<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">所有分类 <span class="caret"></span></a>
										<ul class="dropdown-menu">
											<li>
												<a href="#">手机数码</a>
											</li>
											<li>
												<a href="#">家用电器</a>
											</li>
											<li>
												<a href="#">鞋靴箱包</a>
											</li>
											<li role="separator" class="divider"></li>
											<li>
												<a href="#">电脑办公</a>
											</li>
											<li role="separator" class="divider"></li>
											<li>
												<a href="#">孕婴保健</a>
											</li>
										</ul>
									</li>
								</ul>
								<form class="navbar-form navbar-right" role="search">
									<div class="form-group">
										<input type="text" class="form-control" placeholder="Search">
									</div>
									<button type="submit" class="btn btn-default">Submit</button>
								</form>
							</div>
						</div>
					</nav>
				</div>
				<!--轮播图-->
				<div class="container">
					<div id="carousel-example-generic" class="carousel slide">
  						<!-- Indicators -->
						  <ol class="carousel-indicators">
						    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
						    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
						    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
						  </ol>
						
						  <!-- Wrapper for slides -->
						  <div class="carousel-inner">
						    <div class="item active">
						      <img src="../img/1.jpg" alt="...">
						      <div class="carousel-caption">
						        ...
						      </div>
						    </div>
						    <div class="item">
						      <img src="../img/2.jpg" alt="...">
						      <div class="carousel-caption">
						        ...
						      </div>
						    </div>
						    <div class="item">
						      <img src="../img/3.jpg" alt="...">
						      <div class="carousel-caption">
						        ...
						      </div>
						    </div>
						  </div>
						
						  <!-- Controls -->
						  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
						    <span class="glyphicon glyphicon-chevron-left"></span>
						  </a>
						  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
						    <span class="glyphicon glyphicon-chevron-right"></span>
						  </a>
						</div>
				</div>
				<!--热门商品-->
				<div class="container" style="margin-top: 10px;">
					<div class="row">
						<span style="font-size: 30px; margin-top: 10px;">
							&nbsp;&nbsp;&nbsp;热门商品&nbsp;&nbsp;&nbsp;
						<img src="../img/title2.jpg"/>
						</span>
					</div>
					<div class="row">
						<div class="col-md-2 hidden-sm hidden-xs" style="height: 388px;">
							<img src="../img/big01.jpg" width="100%" height="100%"/>
						</div>
						<div class="col-md-10">
							<div class="row" style="text-align: center;">
								<div class="col-md-6 hidden-xs hidden-sm" style="height: 188px;padding-left: 30px;">
									<img src="../img/middle01.jpg" style="width:100%; height: 100%;"/>
								</div>
								<div class="col-md-2 col-sm-4 col-xs-6">
									<img src="../img/small03.jpg"/>
									<a href="#"><p>电炖锅</p></a>
									<a href="#"><p style="color: red;">￥299</p></a>
								</div>
								<div class="col-md-2 col-sm-4 col-xs-6">
									<img src="../img/small03.jpg"/>
									<a href="#"><p>电炖锅</p></a>
									<a href="#"><p style="color: red;">￥299</p></a>
								</div>
								<div class="col-md-2 col-sm-4 col-xs-6">
									<img src="../img/small03.jpg"/>
									<a href="#"><p>电炖锅</p></a>
									<a href="#"><p style="color: red;">￥299</p></a>
								</div>
						</div>
						<div class="row" align="center" style="padding-left: 10px;">
							<div class="col-md-2 col-sm-4 col-xs-6">
								<img src="../img/small03.jpg"/>
								<a href="#"><p>电炖锅</p></a>
								<a href="#"><p style="color: red;">￥299</p></a>
							</div>
							<div class="col-md-2 col-sm-4 col-xs-6">
								<img src="../img/small03.jpg"/>
								<a href="#"><p>电炖锅</p></a>
								<a href="#"><p style="color: red;">￥299</p></a>
							</div>
							<div class="col-md-2 col-sm-4 col-xs-6">
								<img src="../img/small03.jpg"/>
								<a href="#"><p>电炖锅</p></a>
								<a href="#"><p style="color: red;">￥299</p></a>
							</div>
							<div class="col-md-2 col-sm-4 col-xs-6">
								<img src="../img/small03.jpg"/>
								<a href="#"><p>电炖锅</p></a>
								<a href="#"><p style="color: red;">￥299</p></a>
							</div>
							<div class="col-md-2 col-sm-4 col-xs-6">
								<img src="../img/small03.jpg"/>
								<a href="#"><p>电炖锅</p></a>
								<a href="#"><p style="color: red;">￥299</p></a>
							</div>
							<div class="col-md-2 col-sm-4 col-xs-6">
								<img src="../img/small03.jpg"/>
								<a href="#"><p>电炖锅</p></a>
								<a href="#"><p style="color: red;">￥299</p></a>
							</div>
						</div>
					</div>
				</div>
				<div class="container" style="width: 1170px; margin-left: -16px;">
					<div class="hidden-xs hidden-sm">
						<img src="../img/ad.jpg" width="100%"/>
							</div>
					</div>
					
				<!--最新商品-->
							<div class="container" style="margin-left: -17px;">
				<div class="row">
					<span style="font-size: 30px; margin-top: 10px;">
										&nbsp;&nbsp;&nbsp;热门商品&nbsp;&nbsp;&nbsp;
									<img src="../img/title2.jpg"/>
									</span>
				</div>
				<div class="row">
					<div class="col-md-2 hidden-sm hidden-xs" style="height: 388px;">
						<img src="../img/big01.jpg" width="100%" height="100%" />
					</div>
					<div class="col-md-10">
						<div class="row" style="text-align: center;">
							<div class="col-md-6 hidden-xs hidden-sm" style="height: 188px;padding-left: 30px;">
								<img src="../img/middle01.jpg" style="width:100%; height: 100%;" />
							</div>
							<div class="col-md-2 col-sm-4 col-xs-6">
								<img src="../img/small03.jpg" />
								<a href="#">
									<p>电炖锅</p>
								</a>
								<a href="#">
									<p style="color: red;">￥299</p>
								</a>
							</div>
							<div class="col-md-2 col-sm-4 col-xs-6">
								<img src="../img/small03.jpg" />
								<a href="#">
									<p>电炖锅</p>
								</a>
								<a href="#">
									<p style="color: red;">￥299</p>
								</a>
							</div>
							<div class="col-md-2 col-sm-4 col-xs-6">
								<img src="../img/small03.jpg" />
								<a href="#">
									<p>电炖锅</p>
								</a>
								<a href="#">
									<p style="color: red;">￥299</p>
								</a>
							</div>
						</div>
						<div class="row" align="center">
							<div class="col-md-2 col-sm-4 col-xs-6">
								<img src="../img/small03.jpg" />
								<a href="#">
									<p>电炖锅</p>
								</a>
								<a href="#">
									<p style="color: red;">￥299</p>
								</a>
							</div>
							<div class="col-md-2 col-sm-4 col-xs-6">
								<img src="../img/small03.jpg" />
								<a href="#">
									<p>电炖锅</p>
								</a>
								<a href="#">
									<p style="color: red;">￥299</p>
								</a>
							</div>
							<div class="col-md-2 col-sm-4 col-xs-6">
								<img src="../img/small03.jpg" />
								<a href="#">
									<p>电炖锅</p>
								</a>
								<a href="#">
									<p style="color: red;">￥299</p>
								</a>
							</div>
							<div class="col-md-2 col-sm-4 col-xs-6">
								<img src="../img/small03.jpg" />
								<a href="#">
									<p>电炖锅</p>
								</a>
								<a href="#">
									<p style="color: red;">￥299</p>
								</a>
							</div>
							<div class="col-md-2 col-sm-4 col-xs-6">
								<img src="../img/small03.jpg" />
								<a href="#">
									<p>电炖锅</p>
								</a>
								<a href="#">
									<p style="color: red;">￥299</p>
								</a>
							</div>
							<div class="col-md-2 col-sm-4 col-xs-6">
								<img src="../img/small03.jpg" />
								<a href="#">
									<p>电炖锅</p>
								</a>
								<a href="#">
									<p style="color: red;">￥299</p>
								</a>
							</div>
						</div>
					</div>
				</div>
				<div class="container" style="width: 1170px; margin-left: -16px;">
					<div class="hidden-xs hidden-sm">
						<img src="../img/ad.jpg" width="100%"/>
					</div>
			   </div>
			   <div class="hidden-xs hidden-sm" style="width: 1140px;">
			   		<img src="../img/footer.jpg" width="100%"/>
			   </div>
			   <div class="container" style="text-align: center;">
			   	    <div class="row">
			   	    	<div class="col-xs-4 col-lg-2">
			   	    		<a href="#"><font>关于我们</font></a>
			   	    	</div>
			   	    	<div class="col-xs-4 col-lg-1">
			   	    		<a href="#"><font>联系我们</font></a>
			   	    	</div>
			   	    	<div class="col-xs-4 col-lg-1">
			   	    		<a href="#"><font>招贤纳士</font></a>
			   	    	</div>
			   	    	<div class="col-xs-4 col-lg-1">
			   	    		<a href="#"><font>法律声明</font></a>
			   	    	</div>
			   	    	<div class="col-xs-4 col-lg-1">
			   	    		<a href="#"><font>友情链接</font></a>
			   	    	</div>
			   	    	<div class="col-xs-4 col-lg-1">
			   	    		<a href="#"><font>支付方式</font></a>
			   	    	</div>
			   	    	<div class="col-xs-4 col-lg-1">
			   	    		<a href="#"><font>配送方式</font></a>
			   	    	</div>
			   	    	<div class="col-xs-4 col-lg-1">
			   	    		<a href="#"><font>服务声明</font></a>
			   	    	</div>
			   	    	<div class="col-xs-4 col-lg-1">
			   	    		<a href="#"><font>广告声明</font></a>
			   	    	</div>	
			   	    </div><br />
			   		<div>
			   			<font>Copyright © 2005-2016 传智商城 版权所有</font>
			   		</div>
			   </div>
			   
			  
	</body>

</html>